<template>
  <!-- 门店综合排名 -->
  <div>
    <!-- 搜索框 -->
    <el-form ref="table_form" :model="table_form" class="table-search" :inline="true" label-width="100px">
      <el-form-item label="统计日期：" prop="endTime">
        <el-date-picker 
          value-format="yyyy-MM-dd HH:mm:ss" 
          v-model="table_form.endTime" 
          type="daterange" 
          :unlink-panels="true"
          :default-time="['00:00:00', '23:59:59']"
          > </el-date-picker>
      </el-form-item>
      <el-form-item label="选择门店：" prop="buyCourseStoreId">
        <el-select clearable v-model="table_form.buyCourseStoreId" placeholder="请选择门店！">
          <el-option
            v-for="item in storeData"
            :key="item.id"
            :label="item.storeName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="门店类型：" prop="storeTypeId">
        <el-select clearable v-model="table_form.storeTypeId" placeholder="请选择门店类型！">
          <el-option label="直营" :value="0"></el-option>
          <el-option label="合营" :value="1"></el-option>
          <el-option label="支撑" :value="2"></el-option>
          <el-option label="系统使用" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择区域：" prop="area">
        <el-cascader v-model="table_form.area" :options="area" :props="{ checkStrictly: true, value: 'label' }" clearable></el-cascader>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="handle_search">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="handle_reset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格顶部的操作按钮 -->
    <div class="btn-box">
      <!-- 接口返回按钮 -->
      <div class="left"></div>
      <!-- 表格列显示、隐藏 -->
      <div class="right">
        <el-popover
          placement="bottom-end"
          width="120"
          trigger="click">
          <el-checkbox v-model="checked_obj[1]">门店名称</el-checkbox>
          <el-checkbox v-model="checked_obj[2]">序号</el-checkbox>
          <el-checkbox v-model="checked_obj[3]">时间</el-checkbox>
          <el-checkbox v-model="checked_obj[4]">门店类型</el-checkbox>
          <el-checkbox v-model="checked_obj[5]">销售收入</el-checkbox>
          <el-checkbox v-model="checked_obj[6]">销售人效</el-checkbox>
          <el-checkbox v-model="checked_obj[7]">销售平效</el-checkbox>
          <el-checkbox v-model="checked_obj[8]">耗课金额</el-checkbox>
          <el-checkbox v-model="checked_obj[9]">耗课节数</el-checkbox>
          <el-checkbox v-model="checked_obj[10]">深度13及以上</el-checkbox>
          <el-checkbox v-model="checked_obj[11]">深度10</el-checkbox>
          <el-checkbox v-model="checked_obj[12]">深度6</el-checkbox>
          <el-checkbox v-model="checked_obj[13]">深度4</el-checkbox>
          <el-checkbox v-model="checked_obj[14]">深度1</el-checkbox>
          <el-checkbox v-model="checked_obj[15]">主要教练会员数</el-checkbox>
          <el-checkbox v-model="checked_obj[16]">完课会员数</el-checkbox>
          <el-checkbox v-model="checked_obj[17]">有效会员数</el-checkbox>
          <el-checkbox v-model="checked_obj[18]">新注册会员数</el-checkbox>
          <el-checkbox v-model="checked_obj[19]">到访数</el-checkbox>
          <el-checkbox v-model="checked_obj[20]">转化数</el-checkbox>
          <el-checkbox v-model="checked_obj[21]">转化率</el-checkbox>
          <el-checkbox v-model="checked_obj[22]">预约数</el-checkbox>
          <el-checkbox v-model="checked_obj[23]">会员取消数</el-checkbox>
          <el-checkbox v-model="checked_obj[24]">教练取消数</el-checkbox>
          <el-checkbox v-model="checked_obj[25]">取消比例</el-checkbox>
          <el-checkbox v-model="checked_obj[26]">会员预约数</el-checkbox>
          <el-checkbox v-model="checked_obj[27]">教练预约数</el-checkbox>
          <el-button slot="reference" type="primary" icon="iconfont icon-faxianxuanze"></el-button>
        </el-popover>
        <!-- 导出excell -->
        <el-button type="primary" icon="iconfont icon-export" @click="handle_excell"></el-button>
      </div>
    </div>

     <!-- 表格 -->
    <el-table id="excell-table" :data="tableData" border header-cell-class-name="table-style">
      <el-table-column label="门店名称" show-overflow-tooltip min-width="200" fixed="left" align="center"  v-if="checked_obj[1]">
        <template slot-scope="scope"> {{ scope.row.storeName }} </template>
      </el-table-column>
      <el-table-column label="序号" align="center"  v-if="checked_obj[2]" type="index">
      </el-table-column>
      <el-table-column label="时间" align="center"  v-if="checked_obj[3]">
        <template slot-scope="scope"> {{ scope.row.endTime}} </template>
      </el-table-column>
      <el-table-column label="门店类型" align="center"  v-if="checked_obj[4]">
        <template slot-scope="scope"> {{ G_store(scope.row.storeMode) }} </template>
      </el-table-column>
      <el-table-column label="销售收入" align="center"  v-if="checked_obj[5]">
        <template slot-scope="scope"> {{ scope.row.unitPriceAll }} </template>
      </el-table-column>
      <el-table-column label="销售人效" align="center"  v-if="checked_obj[6]">
        <template slot-scope="scope"> {{ scope.row.humanEffect }} </template>
      </el-table-column>
      <el-table-column label="销售平效" align="center"  v-if="checked_obj[7]">
        <template slot-scope="scope"> {{ scope.row.areaEffect }} </template>
      </el-table-column>
      <el-table-column label="耗课金额" align="center"  v-if="checked_obj[8]">
        <template slot-scope="scope"> {{ scope.row.price }} </template>
      </el-table-column>
      <el-table-column label="耗课节数" align="center"  v-if="checked_obj[9]">
        <template slot-scope="scope"> {{ scope.row.srCount }} </template>
      </el-table-column>
      <el-table-column label="深度13及以上" min-width="120" align="center"  v-if="checked_obj[10]">
        <template slot-scope="scope"> {{ scope.row.retention13 }} </template>
      </el-table-column>
      <el-table-column label="深度10" align="center"  v-if="checked_obj[11]">
        <template slot-scope="scope"> {{ scope.row.retention10 }} </template>
      </el-table-column>
      <el-table-column label="深度6" align="center"  v-if="checked_obj[12]">
        <template slot-scope="scope"> {{ scope.row.retention6 }} </template>
      </el-table-column>
      <el-table-column label="深度4" align="center"  v-if="checked_obj[13]">
        <template slot-scope="scope"> {{ scope.row.retention4 }} </template>
      </el-table-column>
      <el-table-column label="深度1" align="center"  v-if="checked_obj[14]">
        <template slot-scope="scope"> {{ scope.row.retention1 }} </template>
      </el-table-column>
      <el-table-column label="主要教练会员数" min-width="120" align="center"  v-if="checked_obj[15]">
        <template slot-scope="scope"> {{ scope.row.vipCount }} </template>
      </el-table-column>
      <el-table-column label="完课会员数" align="center"  v-if="checked_obj[16]">
        <template slot-scope="scope"> {{ scope.row.overCourseVipUserCount }} </template>
      </el-table-column>
      <el-table-column label="有效会员数" align="center"  v-if="checked_obj[17]">
        <template slot-scope="scope"> {{ scope.row.vaildVipUserCount }} </template>
      </el-table-column>
      <el-table-column label="新注册会员数" min-width="120" align="center"  v-if="checked_obj[18]">
        <template slot-scope="scope"> {{ scope.row.registerUserCount }} </template>
      </el-table-column>
      <el-table-column label="到访数" align="center"  v-if="checked_obj[19]">
        <template slot-scope="scope"> {{ scope.row.experienceVipUserCount }} </template>
      </el-table-column>
      <el-table-column label="转化数" align="center"  v-if="checked_obj[20]">
        <template slot-scope="scope"> {{ scope.row.registerUserCount }} </template>
      </el-table-column>
      <el-table-column label="转化率(%)" align="center"  v-if="checked_obj[21]">
        <template slot-scope="scope"> {{ scope.row.visitsCount }} </template>
      </el-table-column>
      <el-table-column label="预约数" align="center"  v-if="checked_obj[22]">
        <template slot-scope="scope"> {{ scope.row.storeSubCount }} </template>
      </el-table-column>
      <el-table-column label="会员取消数" align="center"  v-if="checked_obj[23]">
        <template slot-scope="scope"> {{ scope.row.coachCancelCount }} </template>
      </el-table-column>
      <el-table-column label="教练取消数" align="center"  v-if="checked_obj[24]">
        <template slot-scope="scope"> {{ scope.row.vipCancelCount }} </template>
      </el-table-column>
      <el-table-column label="取消比例(%)" min-width="120" align="center"  v-if="checked_obj[25]">
        <template slot-scope="scope"> {{ scope.row.cancellationRatio }} </template>
      </el-table-column>
      <el-table-column label="会员预约数" align="center"  v-if="checked_obj[26]">
        <template slot-scope="scope"> {{ scope.row.vipSubCount }} </template>
      </el-table-column>
      <el-table-column label="教练预约数" align="center"  v-if="checked_obj[27]">
        <template slot-scope="scope"> {{ scope.row.coachSubCount }} </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import area from '@/utils/area.json'
import { selectByRule } from '@/utils/apiStore.js'
import { storeRank } from '@/utils/apiAnalysis.js'
export default {
  data() {
    return {
      table_form: {
        endTime: this.G_time('', 1),
        createTimeBigin: '',
        createTimeEnd: '',
        area: '',
        province: '', // 第一层
        city: '', // 第二层
        district: '', // 第三层,
        buyCourseStoreId: '',
        storeTypeId: ''
      },
      area,
      storeData: [],
      tableData: [],
      checked_obj: {
        1: true,
        2: true,
        3: true,
        4: true,
        5: true,
        6: true,
        7: true,
        8: true,
        9: true,
        10: true,
        11: true,
        12: true,
        13: true,
        14: true,
        15: true,
        16: true,
        17: true,
        18: true,
        19: true,
        20: true,
        21: true,
        22: true,
        23: true,
        24: true,
        25: true,
        26: true,
        27: true,
      }
    }
  },
  mounted () {
    this.get_store()
  },
  methods: {
    // 搜索
    handle_search() {
      // 处理时间
      if (this.table_form.endTime?.length == 2) {
        this.table_form.createTimeBigin  = this.table_form.endTime[0]
        this.table_form.createTimeEnd    = this.table_form.endTime[1]
      } else {
        this.table_form.endTime           = ''
        this.table_form.createTimeBigin   = ''
        this.table_form.createTimeEnd     = ''
      }

      // 区域选择
      if (this.table_form.area.length) {
        this.table_form.province  = this.table_form.area[0]
        this.table_form.city      = this.table_form.area[1] || ''
        this.table_form.district  = this.table_form.area[2] || ''
      }
      this.set_table(this.table_form)
    },

    // 重置resetFields
    handle_reset() {
      this.$refs['table_form'].resetFields()
       if (this.table_form.endTime?.length == 2) {
        this.table_form.createTimeBigin  = this.table_form.endTime[0]
        this.table_form.createTimeEnd    = this.table_form.endTime[1]
      } else {
        this.table_form.endTime           = ''
        this.table_form.createTimeBigin   = ''
        this.table_form.createTimeEnd     = ''
      }
      this.table_form.province            = ''
      this.table_form.city                = ''
      this.table_form.district            = ''

      this.set_table(this.table_form)
    },

    // 获取门店下拉框数据
    get_store() {
      selectByRule({ page: 1, rows: 999999 }).then(res => {
        if (res.errCode == 200) {
          let { elements } = res.data
          this.storeData = elements
        }
      })
    },

    // 表格数据
    set_table(params) {
      this.tableData = []
      storeRank(params).then(res => {
        if (res.errCode == 200) {
          this.tableData = res.data
        }
      })
    },

    // 导出excell
    handle_excell() {
      this.$confirm('是否导出excell表格?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          this.G_excell2()
      }).catch(action => {});
    },
  }
};
</script>

<style lang="scss" scoped>
</style>